<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item @click="goshux">商品</el-breadcrumb-item>
        <el-breadcrumb-item>属性管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
        <div class="card-header">

            <span>
                <el-icon>
                    <Tickets />
                </el-icon>
                数据列表</span>
            <el-button class="button" text @click="onAddUser">添加</el-button>
        </div>
    </el-card>
    <!-- 数据的展示 -->
    <el-table :data="tableData" style="width: 100%" :border="true">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="分类名称" />
        <el-table-column label="级别">
            <template #default="scope">
                <div>{{ scope.row.level === 0 ? "一级" : "二级" }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="productCount" label="商品数量" />
        <!-- 自定义列模板 -->
        <el-table-column prop="productUnit" label="数量单位">

        </el-table-column>
        <el-table-column label="导航栏">

            <template #default="scope">
                <el-switch :value="scope.row.navStatus == 1" @click="onClick(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column label="是否显示">
            <template #default="scope">
                <el-switch :value="scope.row.showStatus == 1" @click="onClicks(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序">
        </el-table-column>
        <el-table-column label="设置" width="190">
            <template #default="scope">
                <el-button size="small" @click="SxList(scope.row.id)">查看下级</el-button>
                <el-button size="small" @click="CsList">转移商品</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
            <template #default="scope">
                <el-button @click="onEdit(scope.row.id)">编辑</el-button>
                <el-button @click="DelForm(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
        :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 编辑组件 -->
    <Edit :visible="visible" :form="modalForm" @cancel="onCloseDialog" @confirm="onConfirmDialog"></Edit>
</template>


<script setup lang="ts">
import { ref, watch } from 'vue'
import type { Ref } from 'vue'
import * as api from '../../request/api'
import useTable from '../../hooks/useTables'
import Edit from './add.vue'
import type { AdminAdd, IAdminDelete, IAdminListRes, IAdminListItem } from '../../request/QmsAdminConreiller/index'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
import { useRouter, useRoute } from "vue-router"
const value1 = ref(true)
const value2 = ref(true)
let name = ref("")
let add = false;   // false编辑 true 新增
let modalForm = ref({}) as Ref<IAdminListItem>
let router = useRouter()
let route = useRoute()
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTable(api.admin.AdminAddCategoryItem, {
    parentId: route.query.parentId
})
// 弹框
let visible = ref(false)

// 添加用户
let onAddUser = async () => {
    router.push("/pms/addProductCate")


}
let onClick = async (row: any) => {
    row.navStatus = row.navStatus === 0 ? 1 : 0
    // 发请求
    await api.admin.navStatusItem({
        ids: row.id,
        navStatus: row.navStatus
    })
}
let onClicks = async (row: any) => {
    row.showStatus = row.showStatus === 0 ? 1 : 0
    // 发请求
    await api.admin.showStatusItem({
        ids: row.id,
        showStatus: row.showStatus
    })
}
// 编辑
let onEdit = (id: number) => {
    router.push(`/pms/updateProductCate?id=${id}`)

}

// 子级emit组件传过来的事件
let onCloseDialog = () => {
    visible.value = false
}
let SxList = (row: any) => {
    console.log(row);

    router.push(
        `/pms/productCate?parentId=${row}`
    )

    // route.query.parentId
    setTimeout(() => {
        getTableData()
        router.go(0)
    })


}


let CsList = () => {
    router.push("/pms/Viewproperties")
}
// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: IAdminListItem) => {
    console.log(row);  // row就是表单数据
    // 二次 确认 
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求
            // 去判断 是 编辑 还是添加
            console.log(add);

            if (add) {
                await api.admin.withAttrItem()  // 新增
            } else {
                await api.admin.adminListbj(row) // 编辑
            }

            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}

getTableData()
let onSearch = async () => {
    console.log(name.value);
    getTableData()
    // 发起请求 ，搜索数据
    // let listData = await api.admin.getAdminList({ keyword: name.value })
}
function goshux() {
    router.push("/pms/addProduct")
}

let DelForm = (id: number) => {
    console.log(id);

    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async (add) => {
            if (add) {
                await api.admin.deleteStatusItem(id) //删除
            }
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
}

.el-card {
    width: 100%;
    margin: 50px auto;
}

:deep .cell {
    text-align: center;
}

.el-pagination {
    float: right;
}
</style>